<template>
    <div ref="pieChart" style="width:100%;height:100%"></div>
</template>
<script>
import * as echarts from 'echarts';
import request from '@/utils/request';

export default {
    name: 'PieChart',
    data() {
        return {
            chartData: [
                { value: 0, name: '在线', itemStyle: { color: '#365cef' } },
                { value: 0, name: '未在线', itemStyle: { color: '#739ec5' } },
            ],
        };
    },
    mounted() {
        this.initChart();
        this.on_line();
    },
    methods: {
        initChart() {
            var myChart = echarts.init(this.$refs.pieChart);
            myChart.clear();
            let listener = function () {
                myChart.resize();
            };
            window.addEventListener("resize", listener);
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: '15%',
                    top: 'middle',
                    formatter: function (name) {
                        var value = option.series[0].data.find(item => item.name === name).value;
                        return name + ' ' + value;
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['20%', '50%'],
                        data: this.chartData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: '{b}\n{c} ({d}%)',
                            rich: {
                                b: {
                                    color: 'black',
                                    lineHeight: 20
                                },
                                c: {
                                    color: 'black',
                                    fontSize: 20,
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            show: false // 去除扇形上的折线
                        },
                        label: {
                            show: false // 去除折线指向的文字
                        },
                    }
                ]
            };

            myChart.setOption(option);
        },
        // 在线微信
        on_line() {
            //console.log(112);
            // var wxId=this.$store.state.user.wxid
            // var userId=this.$store.state.user.userid
            // var deptId=this.$store.state.user.deptid
            // var data={userId,wxId,deptId}
            on_line().then(res => {
                //console.log(res, '在线微信');
                if (res.success) {
                    // 更新chartData
                    this.chartData[0].value = res.data.ol;
                    this.chartData[1].value = res.data.nool;
                    // 重新设置图表选项
                    this.initChart();
                }
            })
        },
    }
};

// 在线微信数
export function on_line() {
    return request({
        url: '/arbit/wcuser_info/GetoOnLine',
        method: 'get',
    });
}
</script>